<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

    <input @click="toggleIsShow" type="button" value="切换显示">


    <!-- v-if 操作dom树, 比较消耗资源  -->
    <p v-if="isShow">llhuang10 - v-if</p>
    <!-- v-show 操作style样式 -->
    <p v-show="isShow">llhuang10 - v-show</p>

    <!--  -->
    <h2 v-if="temperature > 35">热死拉</h2>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            isShow: false,
            temperature: 20
        },
        methods: {
            toggleIsShow: function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</body>
</html>